<template>
    <!-- pages/person/showcode/index.wxml -->
    <view class="imgbox">
        <view class="logoimgbox">
            <image class="logoimg" src="/static/images/logo.png"></image>
        </view>
        <view class="moneybox" v-if="price">
            <text class="money1 mr-20">￥</text>
            <text class="money2">{{ price }}</text>
        </view>
        <view class="codeimgbox">
            <image class="codeimg" :src="codeimg"></image>
        </view>
        <view class="text-msg">扫描二维码向我付款</view>
    </view>
</template>

<script>
// pages/person/showcode/index.js
export default {
    data() {
        return {
            codeimg: '',
            price: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.setData({
            codeimg: options.img,
            price: options.price
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {}
};
</script>
<style>
/* pages/person/showcode/index.wxss */
page {
    background-color: #fbfbfb;
}

/* 二维码展示 */
.imgbox {
    width: 670rpx;
    height: 864rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(226, 226, 226, 0.4);
    border-radius: 5px;
    margin: 140rpx 40rpx 0 40rpx;
}

.logoimgbox {
    position: relative;
    left: 256rpx;
    top: -80rpx;
}

.mt-140 {
    margin-top: 140rpx;
}

.logoimg {
    width: 160rpx;
    height: 160rpx;
}

.money1 {
    font-size: 40rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 100rpx;
}

.money2 {
    font-size: 60rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 100rpx;
}

.codeimgbox {
    margin-top: 60rpx;
    display: flex;
    justify-content: center;
}

.codeimg {
    width: 420rpx;
    height: 420rpx;
}

.text-msg {
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
    width: 100%;
    text-align: center;
    margin-top: 40rpx;
}

.moneybox {
    text-align: center;
    margin-top: -20rpx;
}
</style>
